import BasicWidget from "./BasicWidget"

const _getWidgetProps = (widgetProps) => {
  return widgetProps|| {
    label: "时间",
    labelWidth: 80,
    field: "time",
    placeholder: "请选择时间",
    colspan: 6,
    clearable: true,
    disabled: true,
    required: false
  }
}

const widgetPropDescribe = {
  label: {
    type: "input",
    name: "标题"
  },
  labelWidth: {
    type: "number",
    name: "标题宽度"
  },
  field: {
    type: "input",
    name: "字段名"
  },
  placeholder: {
    type: "input",
    name: "占位字符"
  },
  colspan: {
    type: "number",
    name: "栅格数",
    min: 1,
    max: 24
  },
  clearable: {
    type: "switch",
    name: "是否可清空"
  },
  disabled: {
    type: "switch",
    name: "是否禁用"
  },
  required: {
    type: "switch",
    name: "是否必填"
  },
}

export default class TimePicker extends BasicWidget {
  constructor(widgetProps) {
    super(_getWidgetProps(widgetProps), widgetPropDescribe);
    this.tag = "el-time-select";
    this.key = Symbol(this.tag);
    this.defaultValue = "";
  }
  /**
   * 生成组件的 html 代码
   * @param {number} index 当前组件在 selectedWidgets 里的索引
   * @returns 
   */
  createWidgetHtml(index, editting, parentId) {
    this.index = index;
    this.parentId = parentId;
    const {
      label,
      labelWidth,
      field,
      placeholder,
      colspan,
      clearable,
      disabled,
      required
    } = this.widgetProps
    return (
      editting ?
      `<el-col
        :span=${colspan}
        id=${this.id}
        data-parentid=${parentId || "ultrame-canvas"}
        data-idx=${index}
        class="ultrame-form-item-box"
        data-action="move"
        draggable="true">
        <span
          class="${required ? 'required' : ''} label"
          style="width: ${labelWidth}px;">
          ${label}
        </span>
        <div class="inputContainer">
          <${this.tag}
            v-model="${field}"
            placeholder="${placeholder}"
            :clearable=${clearable}
            :disabled="${disabled}">
          </${this.tag}>
        </div>
      </el-col>` :
      `<el-col :span=${colspan}>
        ${this.createPureWidgetHtml()}
      </el-col>`
    )
  }
  createPureWidgetHtml() {
    const {
      label,
      labelWidth,
      field,
      placeholder,
      clearable,
      disabled,
      required
    } = this.widgetProps
    return (
      `<el-form-item
      label="${label}"
      label-width="${labelWidth}px"
      prop="${field}"
      :required="${required}">
        <${this.tag} 
          v-model="formData.${field}"
          placeholder="${placeholder}"
          :clearable=${clearable}
          :disabled="${disabled}">
        </${this.tag}>
      </el-form-item>`
    )
  }
}